<template>
    <el-form :model="form" label-width="140px">
        <el-form-item label="rodEnum：">
            <el-input v-model="form.rodEnum"/>
        </el-form-item>
        <el-form-item label="项目ID：">
            <el-input v-model="form.projectId"/>
        </el-form-item>
        <el-form-item label="抓图模式：">
            <el-select v-model="form.captureType" disabled placeholder="please select">
                <el-option label="按时间点抓图" :value="1"/>
                <el-option label="按时间间隔抓图" :value="2"/>
            </el-select>
        </el-form-item>
        <el-form-item label="预约日期段：" required>
            <el-date-picker
                    v-model="form.dateRange"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    value-format="YYYY-MM-DD"
            />
        </el-form-item>
        <el-form-item label="时间点列表：" required>
            <el-time-picker
                    v-model="form.timingPoints"
                    range-separator="To"
                    start-placeholder="Start time"
                    end-placeholder="End time"
                    value-format="HHmmss"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button @click="emit('closeView')">Cancel</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import {inject, reactive} from 'vue'
import axios from 'axios'

const emit = defineEmits(['closeView'])

// 使用 inject 获取全局变量
const $host: string = inject('$host');
axios.defaults.baseURL = $host

// do not use same name with ref
const form = reactive({
    rodEnum: 'B',
    projectId: '001',
    captureType: 1,
    dateRange: ['2023-04-19', '2023-05-23'],
    timingPoints: [],
})

const onSubmit = () => {
    console.log('submit!')
    console.log(form)
    let dataAll = getDayAll(form.dateRange[0], form.dateRange[1]);
    console.log(dataAll)
    dataAll.forEach(data => {
        axios({
            method: 'POST',
            url: '/cloud/picture/capture',
            params: {
                rodEnum: form.rodEnum,
                projectId: form.projectId,
                captureType: 1,
                timingPoints: data + form.timingPoints,
            }
        })
    })
}

/**
 * 获取两个日期之间相隔的所有日期
 * @param starDay 起始日期
 * @param endDay 终止日期
 */
function getDayAll(starDay, endDay) {

    var arr = [];
    var dates = [];

    // 设置两个日期UTC时间
    var db = new Date(starDay);
    var de = new Date(endDay);

    // 获取两个日期GTM时间
    var s = db.getTime() - 24 * 60 * 60 * 1000;
    var d = de.getTime() - 24 * 60 * 60 * 1000;

    // 获取到两个日期之间的每一天的毫秒数
    for (var i = s; i <= d;) {
        i = i + 24 * 60 * 60 * 1000;
        arr.push(parseInt(String(i)))
    }

    // 获取每一天的时间  YY-MM-DD
    for (var j in arr) {
        var time = new Date(arr[j]);
        var year = time.getFullYear();
        var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1));
        var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
        var YYMMDD = year + mouth + day;
        dates.push(YYMMDD)
    }

    return dates
}
</script>
